<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:comp="http://java.sun.com/jsf/composite/register"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<f:metadata>
    <f:viewParam name="currency" value="#{transactionsController.filter.currency.id}" />
    <f:viewParam name="account" value="#{transactionsController.filter.account.id}" />
    <f:viewParam name="category" value="#{transactionsController.filter.category.id}" />
    <f:viewParam name="yearMonth" value="#{transactionsController.filter.yearMonth}" />    
    <f:event type="preRenderView" listener="#{transactionsController.init}" />
</f:metadata>
<h:head>
	<title>JSF 2.0 Hello World</title>
</h:head>
<ui:composition template="/templates/layout.xhtml">
	<ui:define name="content">

		<p:growl id="messages" showDetail="true" />

		<p:panel header="Transactions">
						
			<h:form id="filter">
				<p:fieldset legend="Filter" toggleable="true" toggleSpeed="500">

					<div>
						<div>
							<div style="width: 200px; float: left;">
									<h:outputLabel for="currency" value="Currency: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="account" value="Account: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="category" value="Category: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="yearMonth" value="Month: " />
							</div>
						</div><br/>
						<div>
							<div style="width: 200px; float: left;">
								<p:selectOneMenu id="currency" value="#{transactionsController.filter.currency.id}">
									<f:selectItem itemLabel="Any currency"/>
									<f:selectItems value="#{accountsController.currencies}" />
								</p:selectOneMenu>
							</div>
							<div style="width: 200px; float: left;">
								<p:selectOneMenu id="account" value="#{transactionsController.filter.account.id}">
									<f:selectItem itemLabel="Any account" itemValue="-1"/>
									<f:selectItems value="#{transactionsController.accounts}" />
								</p:selectOneMenu>
							</div>
							<div style="width: 200px; float: left;">
								<p:selectOneMenu id="category" value="#{transactionsController.filter.category.id}">
									<f:selectItem itemLabel="Any category" itemValue="-1"/>
									<f:selectItems value="#{transactionsController.categories}" var="category" itemLabel="#{category.name}" itemValue="#{category.id}"/>
								</p:selectOneMenu>
							</div>
							<div style="width: 300px; float: left;" >
								<p:commandButton icon="ui-icon-carat-1-w" update=":filter:yearMonth, :filter:monthDisplay" actionListener="#{transactionsController.updateToPreviousMonth}"/>
								<p:inputText id="monthDisplay" value="#{transactionsController.monthDisplay}"/>
								<p:inputText type="hidden" id="yearMonth" value="#{transactionsController.filter.yearMonth}"/>
								<p:commandButton icon="ui-icon-carat-1-e" update=":filter:yearMonth, :filter:monthDisplay" actionListener="#{transactionsController.updateToNextMonth}"/>
							</div>
						</div>
					</div>
					<br/><br/>
					<p:commandButton value="Filter" icon="ui-icon-arrowrefresh-1-s" update=":form:transactions" actionListener="#{transactionsController.filter}" />
					
				</p:fieldset>
			</h:form>
			
			<h:form id="form">

				<p:toolbar>  
					<p:toolbarGroup align="left">
				    	<p:commandButton value="Add a new transaction" icon="ui-icon-document" oncomplete="addTransactionDialog.show()" />
						<p:commandButton value="Import transactions" icon="ui-icon-disk" oncomplete="importTransactionsDialog.show()" />   
					</p:toolbarGroup>  
				</p:toolbar> 
					
				<p:contextMenu for="transactions">
					<p:menuitem value="View" update=":view:viewTransactionPanel" icon="ui-icon-search" oncomplete="viewTransactionDialog.show()" />
					<p:menuitem value="Edit" update=":edit:editTransactionPanel" icon="ui-icon-search" oncomplete="editTransactionDialog.show()" />
					<p:menuitem value="Delete" update=":form:transactions" icon="ui-icon-close" actionListener="#{transactionsController.deleteTransaction}" />
				</p:contextMenu>
			
				<p:dataTable value="#{transactionsController.transactions}" var="transaction" id="transactions" selectionMode="single" editable="true" editMode="cell"
					selection="#{transactionsController.selectedTransaction}" rowKey="#{transaction.id}" rowStyleClass="#{transaction.ignoreInReports ? 'transaction_black' : (transaction.value le 0 ? 'transaction_red' : 'transaction_green')}">
	
	 				<p:ajax event="cellEdit" listener="#{transactionsController.onCellEdit}" />  
	 
					<p:column>
						<f:facet name="header">Date</f:facet>
						<h:outputText value="#{transaction.date}">
						 	<f:convertDateTime pattern="dd.MM.yyyy" timeZone="Europe/Bucharest"/>
						</h:outputText>
					</p:column>
	
					<p:column style="text-align: right; white-space: nowrap;"  >
						<f:facet name="header">Value</f:facet>
						<h:outputText value="#{transaction.value}">
							<f:convertNumber minFractionDigits="2"></f:convertNumber>
						</h:outputText>
						<h:outputText value=" " />
						<h:outputText value="#{transaction.account.currency.label}" />
					</p:column>
					
					<p:column>
						<f:facet name="header">Details</f:facet>
						<h:outputText value="#{transaction.details}" />
					</p:column>
					
					<p:column >
						<f:facet name="header">Category</f:facet>
						<p:cellEditor>  
					         <f:facet name="output"><h:outputText value="#{transaction.category.name}" /></f:facet>  
					         <f:facet name="input">  
								<h:selectOneMenu value="#{transaction.category}" style="width:100%" converter="categoryConverter">
									<f:selectItem itemLabel="No category" itemValue="" />
									<f:selectItems value="#{transactionsController.categories}"/>
								</h:selectOneMenu>
						    </f:facet>
						</p:cellEditor>
					</p:column>
					
					<p:column>
						<f:facet name="header">Account</f:facet>
						<h:outputText value="#{transaction.account.name}" />
					</p:column>

					<f:facet name="footer"></f:facet>
	
				</p:dataTable> 
			</h:form>
		</p:panel>
		
		<h:form id="view">
			<p:dialog header="Transaction detail" showEffect="fade" widgetVar="viewTransactionDialog" modal="true" styleClass="center" position="top">
				<p:outputPanel id="viewTransactionPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty transactionsController.selectedTransaction}">
						<h:outputLabel for="value" value="Value: " />
						<h:outputText id="value" value="#{transactionsController.selectedTransaction.value}"/>
						<h:outputLabel for="description" value="Description: " />
						<h:outputText id="description" value="#{transactionsController.selectedTransaction.details}"/>
						<h:outputLabel for="currency" value="Currency: " />
						<h:outputText id="currency" value="#{transactionsController.selectedTransaction.account.currency}"/>
					</h:panelGrid>
					<p:commandButton value="Close" icon="ui-icon-cancel" oncomplete="viewTransactionDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
		<h:form id="edit">
			<p:dialog header="Edit transaction" showEffect="fade" widgetVar="editTransactionDialog" modal="true" styleClass="center" position="top">
				<p:outputPanel id="editTransactionPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty transactionsController.selectedTransaction}">
						
						<h:outputLabel for="date" value="Date: " />				
			            <p:calendar value="#{transactionsController.selectedTransaction.date}" id="date" showOn="button" required="true" pattern="dd.MM.yyyy"/>
			              
						<h:outputLabel for="value" value="Value: " />
						<p:inputText id="value" value="#{transactionsController.selectedTransaction.value}" required="true"/>
						
						<h:outputLabel for="account" value="Account: " />
						<p:selectOneMenu id="account" value="#{transactionsController.selectedTransaction.account.id}" required="true">
							<f:selectItems value="#{transactionsController.accounts}" />
						</p:selectOneMenu>
						
						<h:outputLabel for="details" value="Details: " />
						<p:inputTextarea id="details" rows="10" cols="50" required="true" requiredMessage="Enter the details" value="#{transactionsController.selectedTransaction.details}"/>
							
						<h:outputLabel for="category" value="Category: " />						
						<p:selectOneMenu id="category" value="#{transactionsController.selectedTransaction.category.id}">
							<f:selectItem itemLabel="No category" itemValue="" />
							<f:selectItems value="#{transactionsController.categories}"/>
						</p:selectOneMenu>
						
						<h:outputLabel for="ignoreInReports" value="Ignore in reports: " />
						<p:selectBooleanCheckbox id="ignoreInReports" value="#{transactionsController.selectedTransaction.ignoreInReports}" />  
						
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:transactions" icon="ui-icon-disk" actionListener="#{transactionsController.updateTransaction}" 
						oncomplete="editTransactionDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="editTransactionDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
		<h:form id="add">
			<p:dialog header="Add transaction" showEffect="fade" widgetVar="addTransactionDialog" modal="true" styleClass="center" position="top">
				<p:outputPanel id="addTransactionPanel">
					<h:panelGrid columns="2" cellpadding="5">
					
						<h:outputLabel for="date" value="Date: " />				
			            <p:calendar value="#{transactionsController.transaction.date}" id="date" showOn="button" required="true" pattern="dd.MM.yyyy"/>
			              
						<h:outputLabel for="value" value="Value: " />
						<p:inputText id="value" value="#{transactionsController.transaction.value}" required="true"/>
						
						<h:outputLabel for="account" value="Account: " />
						<p:selectOneMenu id="account" value="#{transactionsController.transaction.account.id}" required="true">
							<f:selectItems value="#{transactionsController.accounts}" />
						</p:selectOneMenu>
						
						<h:outputLabel for="details" value="Details: " />
						<p:inputTextarea id="details" rows="10" cols="50" value="#{transactionsController.transaction.details}"
							required="true" requiredMessage="Enter the details"/>
							
						<h:outputLabel for="category" value="Category: " />
						<p:selectOneMenu id="category" value="#{transactionsController.transaction.category.id}" required="true">
							<f:selectItem itemLabel="Select category" itemValue="" />
							<f:selectItems value="#{transactionsController.categories}" />
						</p:selectOneMenu>
						  
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:transactions" icon="ui-icon-disk" actionListener="#{transactionsController.saveTransaction}"
						oncomplete="addTransactionDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="addTransactionDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		
		
		<p:dialog header="Import transactions" showEffect="fade" widgetVar="importTransactionsDialog" modal="true" position="top">
			<h:form id="upload" enctype="multipart/form-data">
				<p:outputPanel id="importTransactionsPanel">
					<h:panelGrid columns="2" cellpadding="5">
						<h:outputLabel for="account" value="Account: " />
						<p:selectOneMenu id="account" value="#{transactionsController.account.id}" required="true">
							<f:selectItems value="#{transactionsController.accounts}" />
						</p:selectOneMenu>
						<h:outputLabel for="account" value="File: " />						
						<p:fileUpload update=":messages" value="#{transactionsController.file}" mode="simple" sizeLimit="100000" allowTypes="/(\.|\/)(xlsx|xls|csv)$/"/>
					</h:panelGrid>
					<p:commandButton value="Import" ajax="false" update=":form:transactions" actionListener="#{transactionsController.handleFileUpload}"
						oncomplete="importTransactionsDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="importTransactionsDialog.hide()" />
				</p:outputPanel>
			</h:form>
		</p:dialog>
		
	</ui:define>
</ui:composition>
</html>